<template>
  <div>
    <el-button icon="el-icon-s-promotion" type="primary" round @click="drive">{{
      title
    }}</el-button>
    <div id="container" style="height: 600px"></div>
    <div id="panel" ref="test"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: {},
      title: "",
      flag: 1,
      map1: {},
      driving: {},
    };
  },
  created() {
    console.log(this.$route.query.one, this.$route.query.two);
    this.getLocation();
  },
  mounted() {
    setTimeout(() => {
      this.initMap();
    }, 2000);
  },
  methods: {
    drive() {
      if (this.flag == 0) {
        this.initMap();
        this.flag = 1;
        this.$refs.test.style.display = "none";
      } else if (this.flag == 1) {
        this.initMap1();
        this.flag = 0;
        this.$refs.test.style.display = "block";
      }
    },
    initMap() {
      this.title = "到这里去";
      this.map = new AMap.Map("container", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 13, //初始化地图层级
        center: [this.$route.query.one, this.$route.query.two], //初始化地图中心点
      });
      var marker = new AMap.Marker({
        position: new AMap.LngLat(this.$route.query.one, this.$route.query.two), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      });
      this.map.add(marker);
    },
    getLocation() {
      navigator.geolocation.getCurrentPosition(
        (res) => {
          this.lat = res.coords.latitude;
          this.lng = res.coords.longitude;
        },
        (err) => {
          console.log(err, "======");
        },
        { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
      );
    },
    initMap1() {
      this.title = "返回";
      this.map1 = new AMap.Map("container", {
        resizeEnable: true,
        center: [this.$route.query.one, this.$route.query.two], //地图中心点
        zoom: 13, //地图显示的缩放级别
      });
      //构造路线导航类
      this.driving = new AMap.Driving({
        map: this.map1,
        panel: "panel",
      });
      // 根据起终点经纬度规划驾车导航路线
      this.driving.search(
        new AMap.LngLat(this.lng, this.lat),
        new AMap.LngLat(this.$route.query.one, this.$route.query.two),
        function (status, result) {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === "complete") {
            log.success("绘制驾车路线完成");
          } else {
            log.error("获取驾车数据失败：" + result);
          }
        }
      );
    },
  },
};
</script>

<style type="text/css">
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
  overflow: hidden;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>
 <style type="text/css">
html,
body,
#container1 {
  width: 100%;
  height: 100%;
}
</style>